<template>
    <div>
        <!--添加和更新分类的对话框-->
        <el-dialog title="规格信息" :visible.sync="dialogFormVisible" @close="closeDialog">
            <el-card class="box-card" v-for="(spec,index) in specifications">
                <div slot="header" class="clearfix">
                    <span>{{spec.group}}</span>
                    <el-button class="btn" type="text" @click="addParam(spec)">添加规格</el-button>
                    <el-button class="btn" type="text" @click="deleteGroup(index)">删除</el-button>
                </div>
                <el-collapse>
                    <el-collapse-item v-for="(p,index) in spec.params" >
                        <template slot="title">
                            <span>{{p.k}}</span><el-button class="btn" type="text" @click="deleteParam(spec.params,index)">删除</el-button>
                        </template>
                        <el-checkbox label="是否全局" v-model="p.global"></el-checkbox>
                        <el-checkbox label="是否搜索" v-model="p.searchable"></el-checkbox>
                        <el-checkbox label="是否数字" v-model="p.numerical"></el-checkbox>
                        <div style="margin: 5px">
                            <el-button class="button-new-tag" size="small" @click="addOption(p.options)">添加选项值
                            </el-button>
                        </div>
                        <el-tag
                                :key="tag"
                                v-for="tag in p.options"
                                closable
                                :disable-transitions="false"
                                @close="deleteOption(p.options,tag)">
                            {{tag}}
                        </el-tag>
                    </el-collapse-item>
                </el-collapse>
            </el-card>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addGroup">添加分组</el-button>
                <el-button @click="resetSpec">重置规格</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveSpec">确 定</el-button>
            </div>
        </el-dialog>
        <p>商品分类</p>
        <el-tree
                style="width: 40%"
                :data="data"
                node-key="id"
                default-expand-all
                @node-click="clickCategory"
                :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
                  type="text"
                  size="mini"
                  @click="() => showSpec(data)">
            规格
          </el-button>
        </span>
      </span>
        </el-tree>
    </div>
</template>

<script>
    export default {
        name: "Specification",
        data() {
            return {
                data: [],                   //树节点数据
                dialogFormVisible: false,
                specifications: [],         //某个分类的规格数组
                isSave: false,              //是否添加，true是false更新
                categoryId:0,               //选择的分类
                oldSpec:[]                  //初始的规格数组
            }
        },
        methods: {
            //根据父分类加载子分类
            loadCategories(pid) {
                this.$http.get("http://api.blb.com/api/goods-api/category/parent/" + pid)
                    .then(res => {
                        if (res.data.code == 1) {
                            this.data = res.data.data;
                        }
                    });
            },
            //点击父分类后加载子分类 data是当前点击节点的数据
            clickCategory(data) {
                this.$http.get("http://api.blb.com/api/goods-api/category/parent/" + data.id)
                    .then(res => {
                        if (res.data.code == 1) {
                            //给当前节点添加children属性
                            this.$set(data, 'children', res.data.data);
                        }
                    });
            },
            //点击分类获得对应的规格
            showSpec(data) {
                this.categoryId = data.id;
                this.$http.get("http://api.blb.com/api/goods-api/spec/category/" + data.id)
                    .then(res => {
                        if (res.data.code == 1) {
                            //判断规格为空，就提示用户进行添加，否则进行更新
                            if(res.data.data == null){
                                this.$confirm("是否添加新的规格？")
                                    .then(() => {
                                        this.isSave = true;
                                        this.dialogFormVisible = true;
                                    });
                            }else{
                                this.specifications = JSON.parse(res.data.data.specifications);
                                this.oldSpec = JSON.parse(res.data.data.specifications);
                                this.dialogFormVisible = true;
                            }
                            console.log(this.specifications);
                        }
                    });
            },
            //删除选项值
            deleteOption(options, tag) {
                //从数组中删除选项
                options.splice(options.indexOf(tag), 1);
            },
            //添加选项值
            addOption(options) {
                this.$prompt("输入选项值")
                    .then(({value}) => {
                        options.push(value);
                    });
            },
            //添加新分组
            addGroup(){
                this.$prompt("输入分组名称")
                    .then(({value}) => {
                        this.specifications.push({group:value,params:[]});
                    });
            },
            //添加新规格
            addParam(group){
                //在组的参数加规格
                this.$prompt("输入规格名称")
                    .then(({value}) => {
                        group.params.push({k:value,global:false,searchable:false,numerical:false,options:[]});
                    });
            },
            //删除分组
            deleteGroup(index){
                this.specifications.splice(index,1);
            },
            //删除规格
            deleteParam(params,index){
                params.splice(index,1);
            },
            //保存规格
            saveSpec(){
                if(this.isSave){
                    this.$http.post("http://api.blb.com/api/goods-api/spec",
                        {categoryId:this.categoryId,specifications:JSON.stringify(this.specifications)})
                        .then(res => {
                           if(res.data.code == 1){
                               this.$message.info("添加规格成功");
                           }
                        });
                }else{
                    this.$http.put("http://api.blb.com/api/goods-api/spec",
                        {categoryId:this.categoryId,specifications:JSON.stringify(this.specifications)})
                        .then(res => {
                            if(res.data.code == 1){
                                this.$message.info("更新规格成功");
                            }
                        });
                }
            },
            closeDialog(){
                this.isSave = false;
                this.specifications = [];
                this.dialogFormVisible = false;
                this.categoryId = 0;
            },
            //重置
            resetSpec(){
                this.specifications = this.oldSpec;
            }
        },
        mounted() {
            this.loadCategories(0);
        }
    }
</script>

<style scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }

    .el-tag + .el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .btn{
        float:right;
        margin-right:10px;
    }
</style>